<template>
  <a-modal
    v-model:visible="visible"
    :footer="false"
    title="智能跟群预览"
    width="50%"
    :modal-style="{ minWidth: '800px' }"
    :mask-closable="false"
  >
    <div class="flex box flex-j-c flex-a-c w-full overflow-x-auto">
      <div class="div-mc">
        <div class="guise-mobile">
          <div class="guise-mobile-show flex-col">
            <div class="flex flex-a-c flex-j-c pt-10 pb-6 px-10">
              <div class="w-26 h-26 flex-center text-size-14 bge33c64 round-50-percent textfff">发</div>
              <div class="text-size-16 font-bold ml-6 text-overflow-1 w-fit max-w-26">{{ groupName }}</div>
            </div>
            <div class="w-full flex-1 bge5e5e5 pt-6 box-border overflow-y-auto" ref="sedBox">
              <div class="flex flex-j-c mb-6">
                <a-empty v-if="empty" class="mt-20n" />
                <a-button v-else type="text" :loading="loading" @click="nextPage">
                  {{ more ? '点击加载上一页' : '没有更多了' }}
                </a-button>
              </div>
              <div class="w-full pr-6 pl-16 box-border mb-20" v-for="item in sendData" :key="item.id" :id="item.id">
                <div class="mb-10 opacity-0">时间占位</div>
                <div class="flex flex-j-e">
                  <div class="mr-8 flex-1">
                    <div class="w-fit bgfff round-10 ml-auto" v-if="item.msgType == 3">
                      <a-image width="120" :src="item.content" />
                    </div>
                    <div class="w-full" v-if="item.msgType == 47">
                      <a-image width="100%" :src="item.content" />
                    </div>
                    <div
                      class="w-full flex-center p-8 box-border round-10 space-pre-line bg75e5a2"
                      v-else-if="item.msgType == 1"
                    >
                      {{ item.content }}
                    </div>
                  </div>
                  <div class="flex-col flex-a-c">
                    <a-avatar :size="30">
                      <img v-if="groupHeadImg" alt="avatar" :src="groupHeadImg" />
                      <span v-else>发</span>
                    </a-avatar>
                    <a-button
                      type="outline"
                      size="mini"
                      shape="round"
                      class="mt-4"
                      :status="item.status == 1 ? 'success' : item.status == -1 ? 'danger' : 'normal'"
                    >
                      {{ item.status == 1 ? '跟发成功' : item.status == -1 ? '跟发失败' : '等待跟发' }}
                    </a-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <icon-forward size="30" class="pl-20n pr-6n text-gray" />
      <div class="w-70n round-6 overflow-hidden">
        <div class="bg-theme textfff w-full flex-center py-10">发送统计</div>
        <div class="flex w-full border-theme">
          <div class="flex-1 py-10 flex-center border-r-theme">共发送</div>
          <div class="flex-1 py-10 flex-center">{{ sendDataInfo.sendNum }}</div>
        </div>
        <div class="flex w-full border-theme">
          <div class="flex-1 py-10 flex-center border-r-theme">成功</div>
          <div class="flex-1 py-10 flex-center">{{ sendDataInfo.successCount }}</div>
        </div>
        <div class="flex w-full border-theme">
          <div class="flex-1 py-10 flex-center border-r-theme">失败</div>
          <div class="flex-1 py-10 flex-center">{{ sendDataInfo.failCount }}</div>
        </div>
        <div class="flex w-full">
          <div class="flex-1 py-10 flex-center">
            <a-button
              type="primary"
              shape="round"
              @click="openModal(listParams.materialGroupId, groupHeadImgO, groupName)"
            >
              <template #icon><icon-refresh /></template>
              刷新预览
            </a-button>
          </div>
          <div class="flex-1 py-10 flex-center">
            <a-button type="outline" shape="round" @click="visible = false">
              <template #icon><icon-poweroff /></template>
              关闭预览
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { detailMaterialPreview } from '@/apis'
import { reAssign } from '@/utils/common'
import { v4 } from 'uuid'

const visible = ref(false)
const loading = ref(false)
const empty = ref(false)
const more = ref(true)
const firstLoad = ref(true)

const listParams = reactive({
  page: 1,
  materialGroupId: undefined
})
const groupHeadImg = ref()
const groupName = ref()
const sedBox = ref()
const sendDataInfo = reactive({
  failCount: 0,
  sendNum: 0,
  successCount: 0
})
const sendData = ref([])

const getData = async () => {
  try {
    loading.value = true
    const res = await detailMaterialPreview(listParams)
    reAssign(sendDataInfo, res.data.sendDataInfo)
    if (listParams.page == 1) {
      sendData.value = []
    }
    empty.value = res.data.sendData.length == 0 && listParams.page == 1
    more.value = res.data.sendData.length > 0
    let el = null
    if (!firstLoad.value) {
      el = document.getElementById(sendData.value[0].id)
    }
    const sendDataO = res.data.sendData
      .map((item) => {
        return { ...item, id: v4() }
      })
      .reverse()
    sendData.value = sendDataO.concat(sendData.value)
    if (firstLoad.value) {
      nextTick(() => {
        //注意要使用nexttick以免获取不到dom
        sedBox.value.scrollTop = sedBox.value.scrollHeight - sedBox.value.offsetHeight
      })
      firstLoad.value = false
    } else {
      nextTick(() => {
        sedBox.value.scrollTo({
          top: el.offsetTop - 80
        })
      })
    }
  } finally {
    loading.value = false
  }
}

const changeCurrent = (e) => {
  listParams.page = e
  getData()
}

// 加载下一页
const nextPage = () => {
  if (more.value) {
    listParams.page += 1
    getData()
  }
}

const openModal = (materialGroupId, groupHeadImgO, groupNameO) => {
  empty.value = false
  more.value = true
  firstLoad.value = true
  groupHeadImg.value = groupHeadImgO
  groupName.value = groupNameO
  listParams.materialGroupId = materialGroupId
  changeCurrent(1)
  visible.value = true
}

defineExpose({ openModal })
</script>

<style lang="scss" scoped>
@import './base.scss';
.bg-theme {
  background: rgb(var(--primary-6));
}
.border-theme {
  box-sizing: border-box;
  border: 1px solid rgb(var(--primary-6));
  border-top: none;
}

.border-r-theme {
  box-sizing: border-box;
  border-right: 1px solid rgb(var(--primary-6));
}
.max-w-26 {
  max-width: calc(100% - 48px);
}
.space-pre-line {
  white-space: pre-line;
  word-break: break-all;
}
.bg75e5a2 {
  background: #75e5a2;
}

.bg-transparent {
  background: transparent;
}

.guise-mobile {
  :deep(.arco-btn-outline) {
    zoom: 0.6;
  }
}

.text50 {
  color: #505050;
}
</style>
